<template>
    <div class="container">
        <el-button type="primary" @click="openPlayer">打开播放器</el-button>
        <el-button type="primary" @click="readFolder">文件夹添加</el-button>
        <el-button type="primary" @click="readFile">单曲添加</el-button>
        <input type="file" id="folderInput" webkitdirectory multiple style="display: none;">
        <input type="file" id="fileInput" accept="audio/mpeg" style="display: none;">
        <el-table :data="audio" style="width: 100%" max-height="240">
            <el-table-column prop="name" label="歌名" min-width="180" />
            <el-table-column fixed="right" label="操作" width="80">
                <template #default="scope">
                    <el-button link type="danger" size="small" @click="deleteAudio(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import head from "../assets/head.jpg";
// 歌曲列表
const audio = ref([]);

const readFolder = () => {
    const input = document.getElementById("folderInput");
    input.click();
    input.addEventListener("change", (e) => {
        const files = e.target.files;
        const audioFiles = [];
        for (let i = 0; i < files.length; i++) {
            if (files[i].type === 'audio/mpeg') { // 筛选出MP3文件
                audioFiles.push(files[i]);
            }
        }
        // 将MP3文件路径写入audio数组
        const mp3s = audioFiles.map(file => {
            let obj = {
                name: file.name, // 歌曲名称
                artist: "", // 歌曲作者
                // 歌曲url地址
                url: file.path,
                // 歌曲封面
                cover: head,
                // 歌词
                lrc: "",
                // 主题
                theme: "rgb(61, 162, 230)",
            }
            return obj
        })
        // 去重逻辑
        const newAudio = mp3s.filter(mp3 => !audio.value.some(a => a.name === mp3.name));
        audio.value.push(...newAudio);
        window.electron.ipcRenderer.send('updateMusic', JSON.stringify(audio.value));
    })
}
const readFile = () => {
    const input = document.getElementById("fileInput");
    input.click();
    input.addEventListener("change", (e) => {
        const files = e.target.files;
        if (files.length > 0) {
            const file = files[0];
            if (file.type === 'audio/mpeg') { // 筛选出MP3文件
                let obj = {
                    name: file.name, // 歌曲名称
                    artist: "", // 歌曲作者
                    // 歌曲url地址
                    url: file.path,
                    // 歌曲封面
                    cover: head,
                    // 歌词
                    lrc: "",
                    // 主题
                    theme: "rgb(61, 162, 230)",
                }
                // 去重逻辑
                if (!audio.value.some(a => a.name === obj.name)) {
                    audio.value.push(obj);
                    window.electron.ipcRenderer.send('updateMusic', JSON.stringify(audio.value));
                }
            }
        }
    })
}

const openPlayer = () => {
    window.electron.ipcRenderer.send('openPlayer', JSON.stringify({}));
}
const deleteAudio = (index, row) => {
  audio.value.splice(index, 1)
  window.electron.ipcRenderer.send('updateMusic', JSON.stringify(audio.value));
}
onMounted(() => {
    window.electron.ipcRenderer.send('getMusic', JSON.stringify([]));
    window.electron.ipcRenderer.on('returnMusic', (event, data) => {
        if (data && JSON.parse(data).length > 0) {
            audio.value = JSON.parse(data);
        }
    })
});
</script>

<style lang="less" scoped>
.container{
    width: 100vw;
    height: 100vh;
    padding: 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
    color: #333;
    opacity: 0.9;
    -webkit-app-region: no-drag;

}
</style>